<template>
  <div class="app-container" style="width: 800px;margin: 30px auto">
    <h3>患者主诉</h3>
    <el-form label-width="160px" :model="info" ref="infoForm" :rules="infoRules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="起病时间：" prop="start_time">
            <el-date-picker v-model="info.start_time" clearable type="date" class="all" placeholder="请选择起病时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="障碍类型：" prop="disorders_types">
            <el-select
                v-model="info.disorders_types" multiple collapse-tags collapse-tags-tooltip
                :max-collapse-tags="2" value-key="id" placeholder="请选择障碍类型" class="all" >
              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.type_name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="药物过敏史：" prop="allergy_history">
            <el-input type="textarea" v-model="info.allergy_history" clearable class="all" placeholder="请输入您的药物过敏史,若没有请填写无"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="既往病史：" prop="past_history">
            <el-input type="textarea" v-model="info.past_history" :autosize="{ minRows: 4 }" clearable class="all" placeholder="请输入您的既往病史,若没有请填写无"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="现病史：" prop="hpi">
            <el-input type="textarea" :autosize="{ minRows: 4 }" v-model="info.hpi" clearable class="all" placeholder="请输入您的现病史"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button type="primary" style="margin: 30px auto;" @click="next(infoForm)">下一步</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { getToken, setToken, removeToken, getCacheInfo, cacheInfo, removeCacheInfo } from '@/utils/auth'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import useUserStore from '/src/store/modules/user'
import { useRoute, useRouter } from 'vue-router'
import { disordersType, saveInfo, updateInfo } from '@/api/login'
import {ElMessageBox} from "element-plus";



const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const created= () => {
  console.log("created-info",info)
  if (!info.medical_record_num){
    ElMessageBox.confirm('还未填写基本信息，请先完成','提醒',
        {
          confirmButtonText: '去填写',
          showCancelButton	: false,
          type: 'warning',
        })
        .then(() => {
          router.push({ path: "/index" });
        })
        .catch(() => {
        })
    return
  }
  delete info.disorders_types
  if(!!info.disorders_type){
    info.disorders_types = info.disorders_type.split(",").map(item => Number(item))
  }
}
const options = reactive([])

disordersType().then(res => {
  res.forEach(e => {
    options.push(e);
  });
})


interface Info{
  start_time: string
  disorders_types: array
  disorders_type: string
  allergy_history: string
  past_history: string
  hpi: string
}
const info = reactive<Info>(getCacheInfo())

const infoForm = ref<FormInstance>()

const infoRules = reactive<FormRules<Info>>({
  start_time:[
    { required:true, trigger: "blur", message: "请选择起病时间"}
  ],
  disorders_types: [
    { required: true, trigger: "blur", message: "请选择障碍类型" }
  ],
  allergy_history: [
    { required: true, trigger: "blur", message: "请输入您的药物过敏史" }
  ],
  past_history: [
    { required: true, trigger: "change", message: "请输入您的既往病史" }
  ],
  hpi:[
    { required:true, trigger: "blur", message: "请输入您的现病史"}
  ],
})

const next = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      info.disorders_type = info.disorders_types.join()
      delete info.disorders_types
      delete info.testRusult
      if(!info.id){
        console.log("saveInfo")
        saveInfo(info).then(res => {
          console.log("saveInfo",res)
          cacheInfo(res);
          router.push({ path: "/test" });
        })
      } else {
        console.log("updateInfo")
        updateInfo(info).then(res => {
          console.log("updateInfo",res)
          cacheInfo(info);
          router.push({ path: "/test" });
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

onBeforeUnmount(() => {
  console.log("close step2")
});

created()

</script>

<style scoped>
.all {
  width: 100%;
}
</style>
